<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }
        .box{
            width: 800px;
            height: 600px;
            margin: 50px auto;
            background-color:aquamarine;
        }
        div .in{
            width: 100%;
            height: 200px;
            background-color: aliceblue;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .in input{
            width: 100px;
            height: 30px;
        }
        button{
            width: 80px;
            height: 30px;
        }
        ul{
            width: 100%;
            height: 400px;
            list-style: none;
        }
        li{
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom: 3px solid #131313;        }
        li span{
            flex: 1;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-left: 2px solid #131313;
            border-right: 2px solid #131313;
        }
        li span:first-child{
            border-left: none;
        }
        li span:last-child{
            border-right: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <div  class="in">
            <span>姓名:</span><input type="text" class="uname" name="uname">
            <span>性别:</span><input type="text" name="1">
            <span>年龄：</span><input type="text" name="1">
            <span>专业：</span><input type="text" name="1">
            <button>发送</button>
        </div>
        <ul>
            <li ><span>姓名</span><span>性别</span><span>年龄</span><span>专业</span><span class="del">清空</span></li>
        </ul>
    </div>
    <script src="../js/tools.js"></script>
    <script>
        var txt=$("input",true), btn=$("button"),ul=$("ul");del=$(".del")

        //按下按钮事件绑定
        btn.onclick=function(){
        for(i=0;i<txt.length;i++)
            if(txt[i].value.trim()===""){
            alert("请输入全部内容")
            return
            }
        
        //创建li标签
        var li=document.createElement("li")
        console.log(li);
            
        //添加内容 
        li.innerHTML=`<span>${txt[0].value}</span><span>${txt[1].value}</span><span>${txt[2].value}</span><span>${txt[3].value}</span><span class="del">删除</span>`
            
        //做第二位li标记
        var Sli=$('li',true)[1];

         //将li添加到第二位前面
        ul.insertBefore(li,Sli)

        //清空input
        for(i=0;i<txt.length;i++)
            txt[i].value="";

            //得到删除键
        var span=$("li span:last-child",1)

        del.onclick=function(){
            location.reload()
        }
        
        for(var i=1; i<span.length; i++){
            span[i].onclick = function(){
                    // 获取父元素节点 parentNode
                    this.parentNode.remove()
                }  
        }
       
        }
        
    </script>
</body>
</html>